<!DOCTYPE html>
<html>

<head>
    <title>ms-backend-wasm</title>
    <style>
        body {
            background: #005ca5;
            font-family: "Microsoft YaHei" ! important;
            font-size: 20px;
            font-weight: bold;
        }

        #one {
            position: absolute;
            top: 26%;
            left: 36%;
        }

        #wasm {
            position: absolute;
            top: 13%;
            left: 22%;
            font-size: 1.8em;
        }

        #left {
            position: absolute;
            top: 32%;
            left: 25%;
        }

        #select-one {
            position: absolute;
            top: 32%;
            left: 36%;
            width: 8em;
            height: 2em;
        }

        #two {
            position: absolute;
            top: 26%;
            left: 46%;
        }

        #select-two {
            position: absolute;
            top: 32%;
            left: 46%;
            width: 8em;
            height: 2em;
        }

        #three {
            position: absolute;
            top: 26%;
            left: 56%;
        }

        #input {
            position: absolute;
            top: 32%;
            left: 56%;
        }

        #btn {
            position: absolute;
            top: 32%;
            left: 70%;
            width: 7em;
            height: 2em;
        }

        #output {
            position: absolute;
            top: 45%;
            left: 25%;
        }

        #text {
            position: absolute;
            top: 43%;
            left: 36%;
            width: 35em;
            height: 18em;
            font-size: 15px;
            border: 1px solid black;
            word-break: break-all;
            overflow: auto;
            background: white;
        }
    </style>
</head>

<body>
    <div>
        <div id="wasm">MindSpore Experimental WebAssembly Backend</div>
        <div id="one">Operator</div>
        <select id="select-one">
            <option value="1" selected="selected"></option>
            <option value=0>Add</option>
            <option value=1>Mul</option>
            <option value=2>Argmax</option>
            <option value=3>EqualCount</option>
        </select>
        <div id="two">Data Type</div>
        <select id="select-two">
            <option value="1" selected="selected"></option>
            <option value=0>FP32</option>
            <option value=1>INT32</option>
            <option value=2>INT8</option>
        </select>
        <div id="left">Input</div>
        <div id="three"></div>
        <input id="input" type="file" placeholder="Select File">
        <button id="btn">OK</button>
        <div id="output">Output</div>
        <pre id="text"></pre>
    </div>

    <script src="src/jquery-1.4.4.min.js"></script>
    <script src="dist/index.js"></script>
    <script type="text/JavaScript">
        let op_type, data_type, file; $(document).ready(function(){ $('#select-one').change(function(){ op_type = $(this).children('option:selected').val(); $('#select-two').change(function(){ data_type = $(this).children('option:selected').val(); });}); $('#input').change(function(){ file = $('#input')[0].files[0]; }); $("#btn").click(function(){ alert('Request already sent！'); if(file){ let
        fr = new FileReader(); fr.onload = function(e) { let data = e.target.result; EntryPoint.load(op_type, data_type, data); }; fr.readAsText(file); }; }); });
    </script>
</body>

</html>